<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../layui/css/layui.css" media="all"/>
    <script src="../../../layui/layui.js"></script>
    <script src="../../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户信息维护</legend>


    <form class="layui-form" action="" lay-filter="example"  id="myform">
        <input type="hidden" name="siteId" id="siteId"><!-- 加一个隐藏主键 -->
        <div class="layui-form-item">
            <label class="layui-form-label">站点名字</label>
            <div class="layui-input-block">
                <input type="text" name="siteName" lay-verify="title" autocomplete="off" placeholder="请输入站点名字" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地区</label>
            <div class="layui-input-block">
                <input type="text" name="mapName" lay-verify="title" autocomplete="off" placeholder="请输入站点名字" class="layui-input" readonly>
                <select name="three" lay-filter="pre" on id="pre"  lay-verify="required">
                    <option value="">请选择省</option>
                </select>
                <select name="three" lay-filter="city" on id="city"  lay-verify="required">
                    <option value="">请选择市</option>
                </select>
                <select name="siteArea" lay-filter="area" on id="area"  lay-verify="required" required>
                    <option value="">请选择县/区</option>
                </select>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">站点电话</label>
            <div class="layui-input-block">
                <input type="text" name="sitePhone" lay-verify="title" autocomplete="off" placeholder="请输入站点电话" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">站点负责人</label>
            <div class="layui-input-block">
                <input type="text" name="siteBoss" lay-verify="title" autocomplete="off" placeholder="请输入站点名字" class="layui-input" readonly>
                <select name="staffName" lay-filter="staffName" on id="staffName"  lay-verify="required">
                    <option value="">请选择负责人</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="tijiao">立即提交</button>
                <button type="button" class="layui-btn layui-btn-primary" id="close_btn">关闭</button>
            </div>
        </div>

    </form>
</fieldset>
<script>

    layui.use(['form', 'layedit', 'laydate','jquery'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , $ = layui.$;

        //创建一个编辑器
        //var editIndex = layedit.build('userRemark');


        //监听提交
        form.on('submit(tijiao)', function(data){
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })





            //利用ajax向后台提交数据
            let url = "/logisticsSite/addOrUpdate";
            let formData = new FormData(document.getElementById("myform"));
            console.info(formData);//输出表单数据
            $.ajax({
                type: 'POST',   //上传文件必须使用post
                url: url,
                data: formData, //需要传输的数据
                dataType:'json',
                processData: false, // 告诉jquery要传输data对象
                contentType: false,   // 告诉jquery不需要增加请求头对于contentType的设置
                success: function (resp) { //如果上传成功,就执行

                    if(resp.state==1){
                        //注意：parent 是 JS 自带的全局对象，可用于操作父页面
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                        //父页面刷新
                        parent.table.reload('nTable');

                        //父页面提示信息
                        parent.layer.msg(resp.msg);

                    }else{
                        layer.msg(resp.msg);
                    }

                }
                ,error:function (arg) { //如果上传失败,就执行
                    console.log(arg)
                }
            });

            return false;
        });


        $("#close_btn").on("click",function () {
            layerClose();
        });

        /*
        * 当点击编辑按钮时,会传入一个id到form.html页面
        * */
        let siteId =getQueryString("siteId");
        //如果id有值
        if(siteId){
            let url = "/logisticsSite/showUpdate";
            let data_ = {siteId:siteId};
            $.post(url,data_,function (resp) {
                if(resp.state==1){
                    form.val('example', resp.data);
                    //重新渲染
                    form.render();

                }
            },"json");
        }

        $.ajax({
            url:"/logisticsSite/siteBoss",
            dataType: 'json',//数据类型
            type: 'POST',//类型
            data:{mapId:1},
            timeout:5000,//超时
            success:function (resp){
                for(let i =0;i<resp.length;i++){
                    console.info(resp[i].staffName)
                    $("#staffName").append("<option value = "+resp[i].staffNum +">"+resp[i].staffName+"</option>")
                }

                form.render("select");
            }
        })

        $.ajax({
            url:"/logisticsSite/three",
            dataType: 'json',//数据类型
            type: 'POST',//类型
            data:{mapId:1},
            timeout:5000,//超时
            success:function (resp){
                for(let i =0;i<resp.length;i++){
                    console.info(resp[i].mapName)
                    $("#pre").append("<option value = "+resp[i].mapId +">"+resp[i].mapName+"</option>")
                }

                form.render("select");
            }
        })


        $(function () {
            form.on("select(pre)",function (data) {

                $("#city option:gt(0)").remove();
                $("#area option:gt(0)").remove();
                let mapId=$("#pre").val();

                $.ajax({
                    url:"/logisticsSite/three",
                    dataType: 'json',//数据类型
                    type: 'POST',//类型
                    data:{mapId:mapId},
                    timeout:5000,//超时
                    success:function (resp){

                        for(let i =0;i<resp.length;i++){

                            console.info("id为"+mapId+"地区名字为"+resp[i].mapName)
                            $("#city").append("<option value = "+resp[i].mapId +">"+resp[i].mapName+"</option>")
                        }

                        form.render("select");
                    }
                })
            })
        })


        $(function () {
            form.on("select(city)",function (data) {
                $("#area option:gt(0)").remove();
                let mapId=$("#city").val();

                $.ajax({
                    url:"/logisticsSite/three",
                    dataType: 'json',//数据类型
                    type: 'POST',//类型
                    data:{mapId:mapId},
                    timeout:5000,//超时
                    success:function (resp){

                        for(let i =0;i<resp.length;i++){

                            console.info("id为"+mapId+"地区名字为"+resp[i].mapName)
                            $("#area").append("<option value = "+resp[i].mapId +">"+resp[i].mapName+"</option>")
                        }

                        form.render("select");
                    }
                })
            })
        })


        /**
         得到地址栏的参数
         */
        function getQueryString(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }

        /**
         * 在子页面中关闭弹出层
         */
        function layerClose(){
            //注意：parent 是 JS 自带的全局对象，可用于操作父页面
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);
        }

    });






</script>
</body>
</html>